<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-header">
        <h2>账号注册</h2>
        <p>请填写完整信息完成注册</p>
      </div>
      
      <form @submit.prevent="handleSubmit" class="register-form">
        <!-- 第一列 -->
        <div class="form-column">
          <!-- 账号 -->
          <div class="form-group">
            <label for="account">
              账号 <span class="required">*</span>
            </label>
            <input 
              v-model="formData.account" 
              type="text" 
              id="account" 
              required
              placeholder="请输入账号"
              class="form-input"
            />
          </div>

          <!-- 密码 -->
          <div class="form-group">
            <label for="password">
              密码 <span class="required">*</span>
            </label>
            <input 
              v-model="formData.password" 
              type="password" 
              id="password" 
              required
              placeholder="请输入密码"
              class="form-input"
            />
          </div>

          <!-- 姓名 -->
          <div class="form-group">
            <label for="name">
              姓名 <span class="required">*</span>
            </label>
            <input 
              v-model="formData.name" 
              type="text" 
              id="name" 
              required
              placeholder="请输入姓名"
              class="form-input"
            />
          </div>

          <!-- 性别 -->
          <div class="form-group">
            <label>
              性别 <span class="required">*</span>
            </label>
            <div class="radio-group">
              <label class="radio-label">
                <input 
                  v-model="formData.sex" 
                  type="radio" 
                  value="1" 
                  class="form-radio"
                /> 男
              </label>
              <label class="radio-label">
                <input 
                  v-model="formData.sex" 
                  type="radio" 
                  value="0" 
                  class="form-radio"
                /> 女
              </label>
            </div>
          </div>

          <!-- 手机号 -->
          <div class="form-group">
            <label for="phone">
              手机号 <span class="required">*</span>
            </label>
            <input 
              v-model="formData.phone" 
              type="tel" 
              id="phone" 
              required
              placeholder="请输入手机号"
              class="form-input"
            />
          </div>
        </div>

        <!-- 第二列 -->
        <div class="form-column">
          <!-- 邮箱 -->
          <div class="form-group">
            <label for="email">
              邮箱 <span class="required">*</span>
            </label>
            <input 
              v-model="formData.email" 
              type="email" 
              id="email" 
              required
              placeholder="请输入邮箱"
              class="form-input"
            />
          </div>

          <!-- 身份证号 -->
          <div class="form-group">
            <label for="idCard">
              身份证号
            </label>
            <input 
              v-model="formData.idCard" 
              type="text" 
              id="idCard" 
              placeholder="请输入身份证号"
              class="form-input"
            />
          </div>


          <!-- 紧急联系人 -->
          <div class="form-group">
            <label for="emergencyContact">紧急联系人</label>
            <input 
              v-model="formData.emergencyContact" 
              type="text" 
              id="emergencyContact" 
              placeholder="请输入紧急联系人姓名"
              class="form-input"
            />
          </div>

          <!-- 紧急联系人电话 -->
          <div class="form-group">
            <label for="emergencyPhone">紧急联系人电话</label>
            <input 
              v-model="formData.emergencyPhone" 
              type="tel" 
              id="emergencyPhone" 
              placeholder="请输入紧急联系人电话"
              class="form-input"
            />
          </div>
        </div>

        <!-- 头像上传（跨列） -->
        <div class="form-group full-width">
          <label for="avatar">头像</label>
          <label class="file-upload-label">
            <span>选择图片</span>
            <input 
              type="file" 
              id="avatar" 
              @change="handleAvatarUpload"
              accept="image/*"
              class="file-upload-input"
            />
          </label>
          <div v-if="formData.img" class="avatar-preview">
            <img :src="formData.img" alt="头像预览" />
            <button type="button" @click="removeAvatar" class="remove-avatar">×</button>
          </div>
        </div>

        <button type="submit" class="submit-btn">
          注册
        </button>
        
        <div class="login-link">
          已有账号？<a href="/Login" >立即登录</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import { register } from '@/api/login';
const formData = ref({
  account: '',
  password: '',
  name: '',
  sex: '',
  phone: '',
  email: '',
  idCard: '',
  img: '',
  emergencyContact: '',
  emergencyPhone: '',
  post: ''
});

const handleAvatarUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      formData.value.img = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

const removeAvatar = () => {
  formData.value.img = '';
  document.getElementById('avatar').value = '';
};

const handleSubmit = () => {
  // 验证逻辑保持不变
  if (!formData.value.account || 
      !formData.value.password || 
      !formData.value.name || 
      !formData.value.sex || 
      !formData.value.phone ||
      !formData.value.email
      ) {
    showNotification('请填写所有必填字段', 'error');
    return;
  }

  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phoneRegex.test(formData.value.phone)) {
    showNotification('请输入有效的手机号', 'error');
    return;
  }

  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(formData.value.email)) {
    showNotification('请输入有效的邮箱地址', 'error');
    return;
  }

  if (formData.value.idCard && !/^\d{17}[\dXx]$/.test(formData.value.idCard)) {
    showNotification('请输入有效的身份证号', 'error');
    return;
  }

  console.log('提交的注册数据:', formData.value);
  register(formData.value)
    .then(response => {
        setTimeout(() => {
          router.push('/Login');
        }, 2000);
    })
    .catch(error => {
      
      showNotification(error.message);
    });


//   showNotification('注册成功，正在跳转...', 'success');
};

const showNotification = (message, type) => {
  const notification = document.createElement('div');
  notification.className = `notification ${type}`;
  notification.textContent = message;
  document.body.appendChild(notification);
  
  setTimeout(() => {
    notification.classList.add('show');
  }, 10);
  
  setTimeout(() => {
    notification.classList.remove('show');
    setTimeout(() => {
      document.body.removeChild(notification);
    }, 300);
  }, 3000);
};
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  padding: 20px;
}

.register-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 800px;
  padding: 30px;
}

.register-header {
  text-align: center;
  margin-bottom: 25px;
}

.register-header h2 {
  color: #333;
  font-size: 22px;
  margin-bottom: 8px;
}

.register-header p {
  color: #666;
  font-size: 14px;
}

.register-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.form-column {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  width: 100%;
}

label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
}

.required {
  color: #ff4d4f;
}

.form-input {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  transition: all 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #4096ff;
  box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.1);
}

.radio-group {
  display: flex;
  gap: 15px;
  padding: 5px 0;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #666;
}

.form-radio {
  width: 16px;
  height: 16px;
  accent-color: #1890ff;
}

.file-upload-label {
  display: inline-block;
  padding: 8px 15px;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.file-upload-label:hover {
  background-color: #e8e8e8;
}

.file-upload-input {
  display: none;
}

.avatar-preview {
  margin-top: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-avatar {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-preview:hover .remove-avatar {
  opacity: 1;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
}

.submit-btn:hover {
  background-color: #096dd9;
}

.login-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: #666;
  width: 100%;
}

.login-link a {
  color: #1890ff;
  text-decoration: none;
}

.login-link a:hover {
  text-decoration: underline;
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  z-index: 1000;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s;
}

.notification.show {
  opacity: 1;
  transform: translateX(0);
}

.notification.error {
  background-color: #ff4d4f;
}

.notification.success {
  background-color: #52c41a;
}

@media (max-width: 768px) {
  .form-column {
    min-width: 100%;
  }
  
  .register-container {
    padding: 20px;
  }
}
</style>